import type { App, Directive, DirectiveBinding } from "vue";
import { usePermission } from "@/hooks/usePermission";

const isAuth = (el: Element, binding: any) => {
  const { hasPermission } = usePermission();
  const permissionList: string | string[] = binding.value || [];
  if (!hasPermission(permissionList)) {
    el.parentNode?.removeChild(el);
  }
};

const mounted = (el: Element, binding: DirectiveBinding<any>) => {
  isAuth(el, binding);
};

const authDirective: Directive = {
  mounted,
};

export const setupPermissionDirective = (app: App) => {
  app.directive("auth", authDirective);
};
